//答案层容器
.answer-warp {
    width: 100%;
    position: relative;
    border: 1px solid #efefef;
    background-color: #fff;
    border-radius: 4px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 8px;
    padding: 16px;
    box-sizing: border-box;
    transition: border-color .5s ease 180ms ease-in-out 0s;

    .answer-list {

        .fetch-date {
            position: absolute;
            right: 5px;
            top: 5px;
        }

        li.answer-list-item {
            padding: 5px;
            box-sizing: border-box;
            position: relative;

            a {
                color: #333;
                font-size: 14px;
                display: block;
                height: 20px;
                width: calc(100% - 60px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: color .3s;

                &:visited {
                    color: #666;
                }

                &:hover {
                    color: #2b6dad;
                }
                
            }
        }
    }

    .topic-name {
        color: #999;
        font-size: 13px;

        a {
            text-decoration: #999;
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .question-link {
        margin-top: 4px;

        a {
            font-weight: bold;
            line-height: 1.3;
            color: #262626;
            font-size: 18px;

            &:hover {
                text-decoration: underline;
            }
        }

    }
    
    //答案内容
    .answer-preview {
        margin-top: 10px;

        a.show-more {
            font-size: 14px;
            color: #2b6dad;

            &:hover {
                text-decoration: underline;
            }
        }
    }
    
    .answer-user {
        margin-top: 10px;

        &:after {
            content: "";
            clear: both;
            display: block;
            overflow: hidden;
            font-size: 0;
            height: 0;
        }

        .photo-wrapper {
            padding-right: 5px;
            float: left;

            img {
                border-radius: 50%;
                height: 40px;
                width: 40px;
            }
        }
        
        .user-info {
            width: calc(100% - 58px);
            margin-left: 8px;
            float: left;

            .answer-permalink {
                margin-top: 3px;
                font-size: 13px;
                color: #999;

                a {
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            .user-intro {
                font-size: 15px;
                color: #333;
            }
        }

    }

    //答案蒙层
    .mask {
        position: absolute;
        text-align: center;
        bottom: 0;
        width: 568px;
        padding-top: 180px;
        background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));
        background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 88%);
    }
}

@media screen and (max-width:900px) {
    .answer-warp {
        .mask {
            width: calc(100% - 32px);
        }
    }

    main {
        width: 100%;
        padding: 0px;
        padding-top: 63px;
    }
}